<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import {ElCard} from "element-plus";
import CarOrderDetail from "@/components/CarOrderDetail.vue";


const orderStatus = ref({'0': '全部订单','1': '未支付', '2': '已完成','3': '已取消或已超时'})
const orders = ref([]) // 要显示的订单列表

const handleClick = (tab)=>{
  console.log(tab.name);
  loadOrdersByStatus(tab.props.name);
}

// 加载全部订单
const loadOrdersByStatus = (status) => {
  axios.get(`/productsOrders/loadAllOrders?status=${status}`).then(resp => {
    if (resp.data && resp.data.length > 0) {
      orders.value = resp.data;
    } else {
      orders.value = []; // 没有订单时清空数据或显示提示
      console.log("暂无数据");
    }
  }).catch(error => {
    console.error("加载订单失败", error);
  });
};


const activeName = ref( '0');

onMounted(() => {
  loadOrdersByStatus('0');
})
</script>

<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 显示所有订单的状态 -->
        <el-tab-pane :label="value" :name="key" v-for="(value, key, index) in orderStatus" :key="index">
          <!-- 判断是否有订单 -->
          <div v-if="orders.length === 0">
            <el-alert title="暂无数据" type="info" description="当前没有符合条件的订单" show-icon />
          </div>
          <!-- 显示订单明细组件 -->
          <car-order-detail v-else :orders="orders" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>


<style scoped>

</style>
